import React, { useEffect, useState } from 'react'
import {Breadcrumb, Card, Tabs, Button } from 'antd'
import {history, Link} from 'umi'
import styles from './index.less'
const { TabPane } = Tabs;
import ActivityInfo from './ActivityInfo'
import { editActivityApi } from '@/api/activity';

export default function Audit() {
  const [auditLists, setAuditLists] = useState({})
  const [scheduleVOS, setScheduleVOS] = useState([])
  const [activityInfo, setActivityInfo] = useState([])
  const [votes, setVotes] = useState([])
  /** 回填数据接口 */
  const backfill = async () => {
    const {location: {state}} = history
    const {data: {data}} = await editActivityApi(state)
    setAuditLists(data)
    console.log(data, 123)
    // 日程
    data.scheduleVOS.length && setScheduleVOS([...data.scheduleVOS])
    //报名
    const applyList = data.activityVOS.filter(item => {
      return item.activityType == 1
    })
    setActivityInfo(applyList)
    // 投票
    const voteLists = data.activityVOS.filter(item => item.activityType == 2)
    setVotes(voteLists)
  }
  /** 回填数据请求 */
  useEffect(() => {
    backfill()
  }, [])
  /** 返回按钮 */
  const backHandler = () => {
    history.push('/')
  }
  const callback = () =>  {
  }
  /** 渲染日程安排 */
  const plan = () => {
    return (
      scheduleVOS.map((item) => (
        <div key={item.scheduleId}>
          {item.scheduleName} --- {item.scheduleDate}
        </div>
      ))
    )
  }
  return (
    <>
      {/** 面包屑导航 */}
      <div className={styles.bread}>
        <Breadcrumb>
          <Breadcrumb.Item>
            <Link to="/createActivity">创建活动</Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Link to="/auditAct">详情</Link>
          </Breadcrumb.Item>
        </Breadcrumb>
        <h1>详情</h1>
      </div>
      {/** 卡片区域 */}
      <div style={{padding: '0 15px'}}>
        <Card>
          <Tabs defaultActiveKey="1"
              onChange={callback}
          >
            <TabPane key="1"
                tab="基本信息"
            >
              <p>活动名称: &nbsp;&nbsp; {auditLists?.activityName || ''}</p>
              <p>活动地点: &nbsp;&nbsp; {auditLists?.activitySite || ''}</p>
              <p>活动时间: &nbsp;&nbsp; {auditLists?.startDate} ~ {auditLists?.endDate}</p>
              <p>活动内容: &nbsp;&nbsp; {auditLists?.activityContent || ''}</p>
              <div style={{display: 'flex', marginBottom: 20}}>
                <div>日程安排: &nbsp;&nbsp; </div>
                <div>{plan()}</div>
              </div>
              <Button onClick={backHandler}
                  type="primary"
              >返回</Button>
            </TabPane>
            <TabPane key="2"
                tab="活动信息"
            >
               {/* 报名 */}
              <ActivityInfo activityInfo={activityInfo}
                  votes={votes}
              />
            </TabPane>
          </Tabs>
        </Card>
      </div>
    </>
  )
}
